<template>
  <div id="information">
    <van-grid :border="false">
      <van-grid-item text="粉丝">
        <template #icon>
          <van-icon name="manager" style="background-color: rgb(255, 46, 86)" />
        </template>
      </van-grid-item>
      <van-grid-item text="评论">
        <template #icon>
          <van-icon name="chat" style="background-color: rgb(90, 183, 226)" />
        </template>
      </van-grid-item>
      <van-grid-item text="@我">
        <template #icon>
          <van-icon name="aim" style="background-color: rgb(252, 108, 84)" />
        </template>
      </van-grid-item>
      <van-grid-item text="通知">
        <template #icon>
          <van-icon name="bell" style="background-color: rgb(255, 187, 34)" />
        </template>
      </van-grid-item>
    </van-grid>
    <p class="dialogue">私信对话</p>
    <van-cell
      v-for="(item, index) in msgs"
      :key="item.fromUser.userId"
      :title="item.fromUser.nickname"
      :label="lastMsg[index].msg"
      @click="$router.push('/conversation')"
    >
      <template #icon>
        <van-image
          round
          width="50px"
          height="50px"
          :src="item.fromUser.avatarUrl"
        />
      </template>
      <template #default>
        <span class="dateTime">{{ lastMsgTime[index] | relativeTime }}</span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getInfoMsg } from '@/api/information.js'
import { Toast } from 'vant'

export default {
  name: 'information',
  data () {
    return {
      msgs: [],
      lastMsg: [],
      lastMsgTime: []
    }
  },
  components: {},
  created () {
    this.getInfo()
  },
  // 定义方法
  methods: {
    async getInfo () {
      try {
        const res = await getInfoMsg()
        this.msgs = res.msgs
        res.msgs.forEach(item => {
          this.lastMsg.push(JSON.parse(item.lastMsg))
          this.lastMsgTime.push(item.lastMsgTime)
        })
      } catch (err) {
        Toast('失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
#information {
  .van-grid {
    .van-icon {
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
    }
  }
  .van-cell {
    text-align: left;
    .van-cell__label {
      width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .van-image {
      margin-right: 10px;
    }
    .van-cell__value {
      position: absolute;
      right: 0;
      width: 200px;
    }
    .dateTime {
      width: 200px;
      margin-right: 10px;
    }
  }

  .dialogue {
    height: 25px;
    line-height: 25px;
    color: rgb(94, 91, 91);
    font-size: 12px;
    background-color: rgb(248, 248, 248);
    padding-left: 20px;
    text-align: left;
  }
}
</style>
